<template>
  <el-form class="register-student" ref="form" :model="formData" :rules="rules">
    <el-form-item prop="schoolCode">
      <el-input
        v-model="formData.schoolCode"
        :placeholder="$tInput('register.school.schoolCode')"
        prefix-icon="el-icon-office-building"
      >
      </el-input>
    </el-form-item>
    <el-form-item prop="idCode">
      <el-input
        v-model="formData.idCode"
        :placeholder="$tInput('register.student.idCode')"
        prefix-icon="el-icon-s-custom"
      >
      </el-input>
    </el-form-item>
    <el-form-item prop="mobile">
      <el-input
        v-model="formData.mobile"
        :placeholder="$tInput('register.student.mobile')"
        prefix-icon="el-icon-mobile-phone"
      >
      </el-input>
    </el-form-item>
    <el-form-item class="captcha-item">
      <el-input
        v-model="captcha"
        :placeholder="$tInput('field.code')"
        prefix-icon="el-icon-picture-outline"
      >
      </el-input>
      <img class="captcha-img" :src="captchaImg" alt @click="getCaptcha" />
    </el-form-item>
    <el-form-item prop="code">
      <el-input
        v-model="formData.code"
        :placeholder="$tInput('field.sms')"
        prefix-icon="el-icon-chat-dot-round"
      >
        <el-button slot="append" type="primary" @click="sendSmsCode"
          >发送验证码</el-button
        >
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        v-model="formData.password"
        :placeholder="$tInput('field.password')"
        type="password"
        prefix-icon="el-icon-lock"
      >
      </el-input>
    </el-form-item>
    <el-form-item prop="password2">
      <el-input
        v-model="formData.password2"
        :placeholder="$tInput('field.password2')"
        type="password"
        prefix-icon="el-icon-lock"
      >
      </el-input>
    </el-form-item>
    <el-button
      class="register-btn"
      type="primary"
      round
      @click="submitForm"
      :loading="submiting"
      >提交注册</el-button
    >
  </el-form>
</template>

<script>
import { getCaptcha, sendSmsCode } from 'services/common'
import { register } from 'services/student/auth'
export default {
  name: 'RegisterStudent',
  data() {
    return {
      formData: {},
      submiting: false,
      captcha: null,
      uuid: null,
      captchaImg: null
    }
  },
  computed: {
    rules() {
      return {
        schoolCode: this.$rule('register.student.schoolCode', {
          required: true
        }),
        idCode: this.$rule('register.student.idCode', {
          required: true
        }),
        mobile: this.$rule('register.student.mobile', {
          required: true
        }),
        code: this.$rule('field.code', {
          required: true
        }),
        password: this.$rule('field.password', {
          required: true
        }),
        password2: this.$rule('field.password2', {
          required: true
        })
      }
    }
  },
  methods: {
    async getCaptcha() {
      try {
        const { img, uuid } = await getCaptcha()
        this.uuid = uuid
        this.captchaImg = img
      } catch (error) {}
    },
    async sendSmsCode() {
      try {
        await sendSmsCode({
          uuid: this.uuid,
          captcha: this.captcha,
          mobile: this.formData.mobile
        })
      } catch (error) {}
    },
    async submitForm() {
      try {
        const valid = await this.$refs.form.validate()
        if (!valid) {
          return
        }
        this.submiting = true
        const { data } = await register(this.formData)
        this.$emit('success', data.studentCode)
      } catch ({ msg }) {
        msg && this.$error(msg)
      } finally {
        this.submiting = false
      }
    }
  },
  mounted() {
    this.getCaptcha()
  }
}
</script>
